<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			.table {
				margin-bottom: 0;
			}
		</style>
		<script>
			function yiRu(oBj) {
				var oldColor = '';
				for(var i = 0; i < oBj.tBodies[0].rows.length; i++) {
					oBj.tBodies[0].rows[i].onmouseover = function() {
						oldColor = this.style.background;
						this.style.background = 'yellow';
					}
					oBj.tBodies[0].rows[i].onmouseout = function() {
						this.style.background = oldColor;
					}
				}
			}

			function shanChu(oBj) {
				for(var i = 0; i < oBj.tBodies[0].rows.length; i++) {
					oBj.tBodies[0].rows[i].cells[3].getElementsByTagName('a')[0].onclick = function() {
						oBj.tBodies[0].removeChild(this.parentNode.parentNode);
					}
				}

			}
			window.onload = function() {
				var oDiv1 = document.getElementById('div1');
				var oTab1 = oDiv1.getElementsByTagName('table');
				var oTxt1 = oDiv1.getElementsByTagName('input');
				var oBtn1 = oDiv1.getElementsByTagName('button');

				yiRu(oTab1[0]);
				shanChu(oTab1[0]);

				oBtn1[0].onclick = function() {
					var Name = oTxt1[0].value;
					if(Name == '' || !isNaN(Name)) {
						alert('重新输入')
					} else {
						for(var i = 0; i < oTab1[0].tBodies[0].rows.length; i++) {
							oTab1[0].tBodies[0].rows[i].style.background = '';
							if(oTab1[0].tBodies[0].rows[i].cells[1].innerHTML == Name) {
								oTab1[0].tBodies[0].rows[i].style.background = '#f1f1f1';
								alert('第' + (i + 1) + '行已找到');
							} else {
								oTab1[0].tBodies[0].rows[i].style.background = '';
							}
						}
					}
				}

				var oDiv2 = document.getElementById('div2');
				var oTab2 = oDiv2.getElementsByTagName('table');
				var oTxt2 = oDiv2.getElementsByTagName('input');
				var oBtn2 = oDiv2.getElementsByTagName('button');

				yiRu(oTab2[0]);
				shanChu(oTab2[0]);

				oBtn2[0].onclick = function() {
					for(var i = 0; i < oTab2[0].tBodies[0].rows.length; i++) {
						var sTab = oTab2[0].tBodies[0].rows[i].cells[1].innerHTML;
						var sTxt = oTxt2[0].value;
						if(sTab.toLowerCase() == sTxt.toLowerCase()) {
							oTab2[0].tBodies[0].rows[i].style.background = '#f1f1f1';
						} else {
							oTab2[0].tBodies[0].rows[i].style.background = '';
						}
					}
				}

				var oDiv3 = document.getElementById('div3');
				var oTab3 = oDiv3.getElementsByTagName('table');
				var oTxt3 = oDiv3.getElementsByTagName('input');
				var oBtn3 = oDiv3.getElementsByTagName('button');

				oBtn3[0].onclick = function() {
					var Name = oTxt3[0].value;
					if(Name == '' || !isNaN(Name)) {
						alert('重新输入')
					} else {
						for(var i = 0; i < oTab3[0].tBodies[0].rows.length; i++) {
							var sTxt = oTxt3[0].value.toLowerCase();
							var sTab = oTab3[0].tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
							if(sTab.search(sTxt) != -1) {
								oTab3[0].tBodies[0].rows[i].style.background = '#f1f1f1';
							} else {
								oTab3[0].tBodies[0].rows[i].style.background = '';
							}
						}
					}
				}

				oBtn3[1].onclick = function() {
					var arr = 'abcdef';
					alert('字母c在字符串的第' + (arr.search('c') + 1) + '位上');
				}

				yiRu(oTab3[0]);
				shanChu(oTab3[0]);

				var oDiv4 = document.getElementById('div4');
				var oTab4 = oDiv4.getElementsByTagName('table');
				var oTxt4 = oDiv4.getElementsByTagName('input');
				var oBtn4 = oDiv4.getElementsByTagName('button');

				oBtn4[0].onclick = function() {
					if(oTxt4[0].value == '' || !isNaN(oTxt4[0].value)) {
						alert('重新输入');
					} else {
						for(var i = 0; i < oTab4[0].tBodies[0].rows.length; i++) {
							var sTab = oTab4[0].tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
							var sTxt = oTxt4[0].value.toLowerCase();

							var sArr = sTxt.split(' ');

							oTab4[0].tBodies[0].rows[i].style.background = '';
							for(var j = 0; j < sArr.length; j++) {
								if(sTab.search(sArr[j]) != -1) {
									oTab4[0].tBodies[0].rows[i].style.background = '#f1f1f1';
								}
							}
						}
					}
				}

				oBtn4[1].onclick = function() {
					var str = 'abc def 123';
					var arr = str.split(' ');
					alert('共拆分了' + arr.length + '段' + '\n分别是' + arr);
				}

				yiRu(oTab4[0]);
				shanChu(oTab4[0]);
			}
		</script>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、表格搜索：基础版本-字符串比较<br><br> 姓名：
			<input type="text" class="form-control" placeholder="必填" /> <button class="btn btn-info">逐行搜索</button><br><br>
			<table class="table table-bordered">
				<thead>
					<tr>
						<td style="width:80px">ID</td>
						<td style="width:200px">姓名</td>
						<td>年龄</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>33</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>44</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>王五</td>
						<td>55</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>赵六</td>
						<td>66</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Danny</td>
						<td>33</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div id="div2" class="box box-re form-inline">
			2、表格搜索：忽略大小写-大小写转换<br><br> 姓名：
			<input type="text" class="form-control" placeholder="必填" /> <button class="btn btn-info">逐行搜索</button><br><br>
			<table class="table table-bordered">
				<thead>
					<tr>
						<td style="width:80px">ID</td>
						<td style="width:200px">姓名</td>
						<td>年龄</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>33</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>44</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>王五</td>
						<td>55</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>赵六</td>
						<td>66</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Danny</td>
						<td>33</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div id="div3" class="box box-re form-inline">
			3、表格搜索：模糊搜素-search的使用<br><br> 姓名：
			<input type="text" class="form-control" placeholder="必填" /> <button class="btn btn-info">逐行搜索</button> <code>var arr='abcdef'</code> <button class="btn btn-info">Search例子找C</button><br><br>
			<table class="table table-bordered">
				<thead>
					<tr>
						<td style="width:80px">ID</td>
						<td style="width:200px">姓名</td>
						<td>年龄</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>33</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>44</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>王五</td>
						<td>55</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>赵六</td>
						<td>66</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Danny</td>
						<td>33</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>6</td>
						<td>赵四</td>
						<td>44</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div id="div4" class="box box-re form-inline">
			4、表格搜索：多关键词-split<br><br> 姓名：
			<input type="text" class="form-control" placeholder="多个词用空格分开" /> <button class="btn btn-info">逐行搜索</button> <code>var str='abc def 123'</code> <button class="btn btn-info">split例子拆分</button><br><br>
			<table class="table table-bordered">
				<thead>
					<tr>
						<td style="width:80px">ID</td>
						<td style="width:200px">姓名</td>
						<td>年龄</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>33</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>44</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>王五</td>
						<td>55</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>赵六</td>
						<td>66</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Danny</td>
						<td>33</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
					<tr>
						<td>6</td>
						<td>赵四</td>
						<td>44</td>
						<td>
							<a href="javascrapt:;">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>表格搜索 基础版本-字符串比较：</b>循环表格中所有tr，一行一行的找。已知要搜索的内容都是在每一行的第二个单元格里，判断第i行的第二个单元格的innerHTML是否等于输入框的value。如果等于，说明已经找到，则改颜色。如果未找到，就把颜色改回默认。</p>
			<p><b>表格搜索 忽略大小写-大小写转换：</b>↑ <code>toLowerCase</code>，作用于就是把字符串都改为小写。例如：<code>sTxt.toLowerCase()</code></p>
			<p><b>表格搜索 模糊搜素-search的使用：</b>↑ <code>search</code>，作用于找到并且返回字符串出现的位置，如果没有找到则返回-1。可以在循环的判断中search一下文本框 value是否不等于-1。如果不等于-1，就说明已经找到了。例如：<code>if(sTab.search(sTxt)!=-1)</code></p>
			<p><b>表格搜索：多关键词-split：</b>如果一个字符串是用空格隔开的，例如：<code>var str='abc def 123'</code>，通过split可以把这个字符串切成三段，例如：<code>var arr=str.split(' ')</code>，意思就是从空格开始切，结果就是切成了3段的数组。↑ 假设用户输入的多个搜索词是用空格分开的字符串，那么可以用split把字符串切分开成为一个数组，例如<code>var sArr=sTxt.split(' ')</code>，然后不管找到未找到都先把颜色设置为默认。接下来做个循环，循环之前切开的那个数组的length。如果search数组的第i个，如果结果不等于-1，例如<code>if(sTab.search(sArr[j])!=-1)</code>，就是找到了，这个时候就执行变色。</p>
		</div>

	</BODY>

</HTML>